<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SpringBoot-web Demo</title>
</head>
<body>
<div >
    <div class="row" style="padding:15px;">
        用户名：<input id='userNameQ' />
            <button type="button" onclick='query()'>搜索</button><br /><br />
            接口响应结果： <textarea readonly id="listResult" style="width:90%; height:120px; color:darkblue; font-size:14px"></textarea>

            <hr/><hr/>
            用户名：<input id='userName' />
            状态：
       <input name="state" value="1" type="radio" checked/>启用
        <input name="state" value="0" type="radio" />停用
        <button type="button" onclick='add()'>新增</button><br /><br />
        接口响应结果： <textarea readonly id="addResult" style="width:90%; height:120px; color:darkblue; font-size:14px"></textarea>
    </div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>

<script>

    var mainHost = 'http://localhost:8080';   //ajax 请求后端接口域名地址

    function query(){

        $("#listResult").text("");

        $.ajax({
            url : mainHost + '/api/sysUser/list',
            data: {userName: $("#userNameQ").val()},
            type: 'post',
            success: function(data){
                $('#listResult').text(JSON.stringify(data));
            },error: function(){
                alert('接口服务异常');
            }
        });

        return false;
    }

    function add(){

        if(!$("#userName").val()){
            return alert("请输入用户名！");
        }

        $('#addResult').text("");
        $.ajax({

            url : mainHost + '/api/sysUser/add',
            data: {
                'userName':$("#userName").val(),
                'state': $("input[name='state']:checked").val()
            },
            type: 'post',
            success: function(data){
                $('#addResult').text(JSON.stringify(data));

            },error: function(){
                alert('接口服务异常');
            }
        });

        return false;
    }

</script>
</body>
</html>